<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Redrawing</title>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="500" style="border:1px solid #d3d3d3;"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw a filled arrow
        function drawFilledArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);

            // Draw the line part
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke();

            // Draw the filled arrowhead
            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.closePath();
            ctx.fill();
        }

        // Clear canvas
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // General styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        
        // Origin and rails
        const Ox = 120;
        const Oy = 420;
        
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(Ox, 50);
        ctx.lineTo(Ox, Oy);
        ctx.lineTo(550, Oy);
        ctx.stroke();

        // Hatching for surfaces
        ctx.lineWidth = 1;
        // Vertical wall hatching
        ctx.beginPath();
        for (let y = 60; y <= Oy; y += 20) {
            ctx.moveTo(Ox, y);
            ctx.lineTo(Ox - 15, y + 15);
        }
        ctx.stroke();

        // Horizontal floor hatching
        ctx.beginPath();
        for (let x = Ox; x < 550; x += 20) {
            ctx.moveTo(x, Oy);
            ctx.lineTo(x + 15, Oy + 15);
        }
        ctx.stroke();

        // Rod AB
        ctx.lineWidth = 3;
        const rodLengthPx = 400;
        const angle = (32 * Math.PI) / 180; // Angle with horizontal
        const Ax = Ox;
        const Ay = Oy - rodLengthPx * Math.sin(angle);
        const Bx = Ox + rodLengthPx * Math.cos(angle);
        const By = Oy;
        
        ctx.beginPath();
        ctx.moveTo(Ax, Ay);
        ctx.lineTo(Bx, By);
        ctx.stroke();

        // Labels for points and length
        ctx.fillStyle = 'black';
        ctx.font = "italic 24px 'Times New Roman'";
        ctx.fillText('O', Ox - 35, Oy + 25);
        ctx.fillText('A', Ax + 10, Ay - 5);
        ctx.fillText('B', Bx - 30, By - 10);
        ctx.fillText('l', (Ax + Bx) / 2 - 5, (Ay + By) / 2 - 20);

        // Velocity vectors and their labels
        const velocityColor = '#333333';
        ctx.strokeStyle = velocityColor;
        ctx.fillStyle = velocityColor;
        ctx.lineWidth = 2;

        // Velocity v_A
        const vA_arrow_x = Ax - 40;
        drawFilledArrow(ctx, vA_arrow_x, Ay, vA_arrow_x, Ay + 70, 12);
        
        ctx.fillStyle = 'black';
        ctx.font = "italic 22px 'Times New Roman'";
        ctx.fillText('v', vA_arrow_x - 35, Ay + 40);
        ctx.font = "italic 16px 'Times New Roman'";
        // The subscript in the original image is ambiguous (v_⊥ or v_1). Using 'A' as per the problem description context.
        ctx.fillText('A', vA_arrow_x - 23, Ay + 47);

        // Velocity v_B
        ctx.strokeStyle = velocityColor;
        ctx.fillStyle = velocityColor;
        drawFilledArrow(ctx, Bx + 10, By, Bx + 80, By, 12);
        
        ctx.fillStyle = 'black';
        ctx.font = "italic 22px 'Times New Roman'";
        ctx.fillText('v', Bx + 90, By + 8);
        ctx.font = "italic 16px 'Times New Roman'";
        ctx.fillText('B', Bx + 102, By + 13);


        // Magnetic Field B
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        const B_x = 450;
        const B_y = 120;

        // Symbol: circle with a dot
        ctx.beginPath();
        ctx.arc(B_x, B_y, 15, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.fillStyle = 'black';
        ctx.beginPath();
        ctx.arc(B_x, B_y, 4, 0, 2 * Math.PI);
        ctx.fill();
        
        // Label for B
        ctx.font = "italic bold 24px 'Times New Roman'";
        ctx.fillText('B', B_x + 25, B_y + 10);

    </script>
</body>
</html>